<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>阿里钉钉官网</title>
    </head>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        a{
            font-size: 14px;
            text-decoration: none;
            color: black;
        }
        a:hover{
            color: #1e9fff;
        }
        .wrapper{
            border: 1px solid blue;
        }
        .head{
            width: 100%;
            height: 80px;
            border-bottom: 1px solid blue;
            background-color: white;
            position: fixed;
        }
        .head-left{
            float: left;
            width: 85px;
            height: 80px;
            margin-left: 150px;
        }
        .logo{
            width: 85px;
            height: 31px;
            /*表示将a标签转换为块元素 */
            display: block;
            margin-top: 25px;
            background-image: url("dingding.png");
            background-size:cover;
        }
        .head-middle{
            float: left;
            width: 855px;
            height: 80px;
            margin-left: 10px;
            overflow:hidden ;
        }
        .head-middle-cp{
            float:left;
            width: 28px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            margin-left: 100px;
        }
        .head-middle-znbgyj{
            float:left;width: 84px;height: 80px;text-align: center;line-height: 80px;margin-left: 50px;
        }
        .head-middle-hyfgzn{
            float:left;width: 84px;height: 80px;text-align: center;line-height: 25px;margin-left: 50px;
        }
        .head-middle-khal{
            float:left;width: 56px;height: 80px;text-align: center;line-height: 80px;margin-left: 50px;
        }
        .head-middle-fw{
            float:left;width: 28px;height: 80px;text-align: center;line-height: 80px;margin-left: 50px;
        }
        .head-middle-kfpt{
            float:left;width: 56px;height: 80px;text-align: center;line-height: 80px;margin-left: 50px;
        }
        .head-middle-xz{
            float:left;width: 28px;height: 80px;text-align: center;line-height: 25px;margin-left: 50px;
        }
        .new{
            width: 27px;
            height: 17px;
            display:block ;
            background-image: url("new.png");
            background-size: cover;
            margin-top:10px ;
            margin-left: 70px;
        }
        .new2{
            width: 27px;
            height: 17px;
            display:block ;
            background-image: url("new.png");
            background-size: cover;
            margin-top:10px ;
            margin-left: 20px;
        }
        .head-right{
            float: left;
            width: 270px;
            height: 80px;
        }
        .head-right-zw{
            float: left;
            width: 100px;
            height: 80px;
            line-height: 80px;
        }
        .earth{
            float: left;
            width: 18px;
            height: 18px;
            background-image: url("earth.png");
            background-size: cover;
            margin: 31px 0px 31px 20px;

        }
        .head-right-zcdd{
            float: left;
            width: 85px;
            height: 80px;
            text-align: center;line-height: 80px;
            background-color: #3296FA;
        }
        .head-right-zcdd:hover{
            background-color: #3b60ff;
        }
        .head-right-qydl{
            float: left;
            height: 80px;
            width: 84px;
            text-align: center;
            line-height: 80px;
            border-right: 1px solid gainsboro;
        }
        .head-right-qydl:hover{
            background-color: #eeeeee;
        }
        .bg{
            width: 100%;
            height: 1440px;
            background-image: url("dingding_background.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
    <body>
        <div class="head">
            <div class="head-left">
                <a class="logo" href="https://www.dingtalk.com/"></a>
            </div>
            <div class="head-middle">
                <div class="head-middle-cp">
                    <a href="https://www.dingtalk.com/">产品</a>
                </div>
                <div class="head-middle-znbgyj">
                    <a href="https://page.dingtalk.com/wow/dingtalk/act/dingding-smartdevice?spm=a213l2.13146415.7065056597.3.7f1518e68gZZyW">智能办公硬件</a>
                </div>
                <div class="head-middle-hyfgzn">
                    <i class="new"></i>
                    <a href="https://page.dingtalk.com/wow/dingtalk/act/fgzngw?spm=a213l2.13146415.7065056597.4.7f1518e6f5Xip1">行业复工指南</a>
                </div>
                <div class="head-middle-khal">
                    <a href="https://page.dingtalk.com/wow/dingtalk/act/dinghomecaselist?spm=a213l2.13146415.7065056597.5.7f1518e6rbZiJp&showhead=0">客户案例</a>
                </div>
                <div class="head-middle-fw">
                    <a href="https://page.dingtalk.com/wow/dingtalk/act/dd-server-y">服务</a>
                </div>
                <div class="head-middle-kfpt">
                    <a href="https://open.dingtalk.com/?spm=a213l2.13146415.7065056597.7.7f1518e6wHa5oz">开放平台</a>
                </div>
                <div class="head-middle-xz">
                    <i class="new2"></i>
                    <a href="https://page.dingtalk.com/wow/dingtalk/act/download?spm=a213l2.13146415.7065056597.8.7f1518e63uVD8K">下载</a>
                </div>
            </div>
            <div class="head-right">
                <div class="head-right-zw">
                    <div class="earth"></div>
                    <a href="https://www.dingtalk.com/" style="margin-left: 5px">中文</a>
                </div>
                <div class="head-right-zcdd">
                    <a href="https://www.dingtalk.com/oasite/register_new.htm?source=1008#/" style="color: white">注册钉钉</a>
                </div>
                <div class="head-right-qydl">
                    <a href="https://oa.dingtalk.com/?spm=a213l2.13146415.7065056597.14.7f1518e63uVD8K#/login">企业登录</a>
                </div>
            </div>
        </div>
    <div class="bg"></div>
    </body>
</html>